<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Getters</title>
    <script src="./vue.js"></script>
    <script src="./vuex.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ doneTodos }}</p>
      <p>{{ doneTodosCount }}</p>
    </div>
    <script>
      const store = new Vuex.Store({
        state: {
          todos: [
            { id: 1, text: "内容1", done: true },
            { id: 2, text: "内容2", done: false },
          ],
        },
        getters: {
          doneTodos: (state) => {
            return state.todos.filter((todo) => todo.done);
          },
          doneTodosCount: (state, getters) => {
            return getters.doneTodos.length;
          },
        },
      });
      var vm = new Vue({
        el: "#app",
        store,
        computed: {
          doneTodos() {
            return this.$store.getters;
          },
          doneTodosCount() {
            return this.$store.getters.doneTodosCount;
          },
        },
      });
    </script>
  </body>
</html>
